<template>
  <div :class="`trend ${isUp ? 'up' : 'down'}`">
    <span v-if="prefix" class="prefix">{{ prefix }}</span>
    <span class="text">{{ value }}</span>
    <span v-if="suffix" class="suffix">{{ suffix }}</span>
    <i :class="`${isUp ? 'el-icon-caret-top' : 'el-icon-caret-bottom'}`" />
  </div>
</template>

<script>
export default {
  name: 'Trend',
  props: {
    value: {
      type: String,
      required: true
    },
    type: {
      type: String,
      validator: (val) => ['up', 'down'].includes(val),
      default: 'up'
    },
    prefix: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isUp() {
      let isUp = this.type === 'up'
      if (this.reverse) {
        isUp = !isUp
      }
      return isUp
    }
  }
}
</script>

<style lang="scss" scoped>
.trend {
    display: inline-block;
    &.up {
        color: #67c23a;
    }
    &.down {
        color: #f56c6c;
    }
    i {
        margin-left: 5px;
    }
}
</style>
